<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜品类别编辑</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <i th:replace="~{common :: baseUrl}"></i>
</head>
<body>

<div style="background-color:white; width: 90%; height: 90%;margin-top: 1%;margin-left: 4%;padding-top: 1%;padding-left: 1%;padding-right: 1%">
    <table class="layui-hide" id="foodMaterialCategory" lay-filter="foodMaterialCategory" align="center"></table>

    <!--        表格右侧操作栏-->
    <script type="text/html" id="barDemo">
        <button class="layui-btn  layui-btn-sm layui-btn-primary" lay-event="del"><i class="layui-icon layui-icon-close"></i></button>
    </script>



    <form class="layui-form layui-form-pane" action=""  >




        <div class="layui-form-item">
            <label class="layui-form-label">单位</label>
            <div class="layui-input-inline">
                <input type="text" id="unit" name="unit" lay-verify="required" placeholder="请输入" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="sub"><i class="layui-icon layui-icon-add-circle"></i></button>

            </div>
        </div>


    </form>


</div>






</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:inline="none">
    //JavaScript代码区域
    layui.use(['element','form','table','layer','laydate'], function() {
        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var $ = layui.$;


        //表格初始化
        table.render({
            elem: '#foodMaterialCategory'
            ,url:baseUrl+'food/material/categoryList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,width: 300
            ,skin: 'row' //行边框风格
            ,even: true //开启隔行背景
            ,size: 'sm' //小尺寸的表格
            ,cols: [[
                {field:'id', width:80, title: 'ID'}
                ,{field:'unit', width:120, title: '单位', edit: 'text'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:95}
            ]]

        });

        //添加
        form.on('submit(sub)', function(data){

            $("#unit").val("");


            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"food/material/addCategory",
                data:data.field,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){
                        table.reload('foodMaterialCategory', {
                            url: baseUrl+'food/material/categoryList'

                        });
                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。

        });




        //行工具栏事件
        table.on('tool(foodMaterialCategory)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            obj.del();
            $.ajax({
                url:baseUrl+"food/material/delCategory",
                data:{"id":data.id},
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){


                    }else {
                        layer.open({
                            title: '删除菜品分类信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
        });


        //监听单元格编辑
        table.on('edit(foodMaterialCategory)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段

            //发送ajax请求  编辑APP信息
            $.ajax({
                url:baseUrl+"food/material/editCategory",
                data:data,
                type:"post",
                dataType:"json",
                success:function (result) {
                    if (result.code==0){

                    }else {
                        layer.open({
                            title: '编辑菜品信息'
                            ,content: result.msg
                        });
                    }
                },
                error:function () {
                    layer.msg("服务器原地爆炸,请联系管理员!!!");
                }
            })
        });






    });

</script>
</html>